<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="utf-8" />
    <title>登录界面</title>
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/h5.common.css?1" rel="stylesheet">
    <link href="css/iconfont.css" rel="stylesheet">
    <script src="js/jquery_2_1_4.js" type="text/javascript"></script>
    <script src="js/h5.common.js" type="text/javascript"></script>
    <!-- <script src="js/vue.min.js" type="text/javascript"></script> -->
    <script src="js/vue.min.js"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script src="js/vue-lazyload.js" type="text/javascript"></script>
    <script src="js/axios.min.js" type="text/javascript"></script>
    <script src="js/vux.common.js" type="text/javascript"></script>
    <link href="css/vux.common.css" rel="stylesheet">
    <link href="js/swiper4/css/swiper.min.css" rel="stylesheet">
    <script type="application/javascript" src="js/swiper4/js/swiper.min.js"></script>
    <script src="js/vconsole.min.js" type="text/javascript"></script>
    <script src="js/qs.min.js" type="text/javascript"></script>
    <script src="js/element_index.js" type="text/javascript"></script>
    <link href="css/elm_index.css" rel="stylesheet">
    <script>
        // window.$ = window.jQuery = require('jquery');
    </script>
    <!-- <script>window.$ = window.jQuery = require('js/jquery_2_1_4.js');</script> -->
    <script>
        // var vConsole = new VConsole();
        </script>
    <style type="text/css">
    blockquote,
    body,
    button,
    dd,
    div,
    dl,
    dt,
    form,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    input,
    li,
    ol,
    p,
    pre,
    td,
    textarea,
    th,
    ul {
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    body {
        font-size: 14px;
        width: 10rem;
        margin: 0 auto;
        position: relative;
        background-color: #f5f5f5;
        /*background: url(./img/loginbg.png);*/
    }

    .clear:after {
        content: "";
        display: block;
        clear: both;
    }

    .login-div {
        position: fixed;
        top: calc(50% - 1rem);
        width: 3rem;
        height: 1.5rem;
        background: #eee;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }

    .input-common {
        border: none;
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
        text-indent: 1em;
    }

    .input-uid {
        position: absolute;
        width: 100%;
        left: 0rem;
        top: 0rem;
        height: 0.4rem;
    }

    .input-pwd {
        position: absolute;
        width: 100%;
        left: 0rem;
        top: 0.5rem;
        height: 0.4rem;
    }

    .submit-btn {
        position: absolute;
        bottom: 0rem;
        height: 0.4rem;
        width: 100%;
        left: 0rem;
        line-height: 0.4rem;
        background-color: #1AAD19;
        border-radius: 2px;
        text-align: center;
        color: #fff;
    }

    .submit-btn:active {
        background-color: #10A010;
    }

    .go_debug {
        position: fixed;
        bottom: 0.1rem;
        right: 0.1rem;
        text-align: right;
        font-size: 14px;
        color: blue;
    }
    </style>
</head>

<body style="background-color: #eee;font-size: 14px;width: 100%;">
    <div id='app'>
        <div class="login-div">
            <input type="" name="" placeholder="输入帐号" class="input-common input-uid" v-model="uid">
            <input type="password" name="" placeholder="输入密码" class="input-common input-pwd" v-model="pwd">
            <div class="submit-btn" v-on:click="btn_action('登录');">登录</div>
        </div>
        <div class="go_debug" v-on:click="btn_action('打开串口调试工具');"><u>打开串口调试工具</u></div>
        <ealert ref="ealertConfirm"></ealert>
    </div>
</body>
<script type="text/javascript">
var path = require('path')
let Datastore = require('nedb');
const userdb = new Datastore({
    filename: path.join(__dirname, '../data-user.db'),
    autoload: true
});
let user_item = {
    uid: 'admin',
    pwd: 'admin'
};
userdb.insert(user_item, function(err, new_doc) {
    "use strict";
    console.log(err, new_doc);
});

userdb.find({ uid: 'admin' }, function(err, list) {
    console.log(err, list)
});

Vue.use(VueLazyload)
// Vue.config.devtools = true


var vm = new Vue({
    el: '#app',
    data: function() {
        return {
            uid: 'admin',
            pwd: 'admin',
        }
    },
    created: function() {},
    computed: {},
    methods: {
        btn_action: function(name) {
            var vm = this;
            if (name == '登录') {
                if (!vm.uid) {
                    vm.$refs.ealertConfirm.showConfirm("提示", "请输入帐号");
                    return;
                }
                if (!vm.pwd) {
                    vm.$refs.ealertConfirm.showConfirm("提示", "请输入密码");
                    return;
                }
                // TODO:校验 
                if (vm.uid == 'admin' && vm.pwd == 'admin') {
                    userdb.find({ uid: vm.uid }, function(err, list) {
                        if (!err && list.length > 0) {
                            var item = list[0]
                            if (item.pwd == vm.pwd) {
                                window.location.href = "main_panel.html"
                            }
                        }
                    });
                } else {
                    vm.$refs.ealertConfirm.showConfirm("提示", "帐号密码不正确");
                    return;
                }
            } else if (name == '打开串口调试工具') {
                window.location.href = "../debug.html"
            }
        }
    },
    watch: {

    },
    mounted: function() {
        var vm = this
        this.$nextTick(function() {

        })
    }
})
</script>

</html>